<template>
  <section>
    <el-card class="m-4">
      <header class="flex items-center">
        <p class="mr-2">H5游戏:</p>
        <el-select v-model="currentGame" class="mr-8" placeholder="游戏">
          <el-option v-for="item in games" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>

        <section v-show="currentGame === '3'" class="flex items-center">
          <p class="mr-2">海岛:</p>
          <el-select v-model="form.plate_id" class="mr-8" placeholder="海岛">
            <el-option v-for="item in islandList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </section>

        <section class="flex items-center">
          <p class="mr-2">礼物:</p>
          <el-select v-model="form.gift_id" class="mr-8" placeholder="请选择送出礼物">
            <el-option v-for="item in currentGiftList" :key="item.prize_id" :label="item.name" :value="item.prize_id">
              <section class="flex items-center justify-between">
                <section class="flex items-center mr-8">
                  <img :src="item.picture" alt="" class="w-6 h-6 mr-4">
                  <p>{{ item.name }}</p>
                </section>
                <p class="text-yellow-700">{{ item.price }} <small>金币</small></p>
              </section>
            </el-option>
          </el-select>
        </section>

        <p class="mr-2">送出礼物数量:</p>
        <el-input-number v-model="form.count" :max="100000" :min="1" class="mr-8" value="0"/>

        <section class="flex items-center w-96">
          <p class="mr-2 w-24">用户昵称:</p>
          <el-input v-model="form.nickname" class="mr-8" clearable placeholder="不填则随机"/>
        </section>

        <el-button size="small" type="success" @click="deBounceWrap(submit)">提交</el-button>
      </header>
    </el-card>

    <el-card class="m-4">
      <el-table :data="tableData" border>
        <el-table-column label="ID" prop="id"/>
        <el-table-column label="游戏名称" prop="game_id">
          <template slot-scope="{row}">
            {{ getGameName(row.game_id) }}
          </template>
        </el-table-column>
        <el-table-column label="用户昵称(虚拟)" prop="nickname"/>
        <el-table-column label="礼物/数量" prop="" width="400">
          <template slot-scope="{row}">
            <el-tag>{{ row.gift.name }} * {{ row.count }} = {{ row.gift.price * row.count }} <small>金币</small></el-tag>
          </template>
        </el-table-column>
        <el-table-column label="通知" prop="is_notify">
          <template slot-scope="{row}">
            <el-tag :type="row.is_notify === 0 ? 'info' : 'success'">
              {{ row.is_notify === 0 ? '否' : '是' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="广播" prop="is_broadcast">
          <template slot-scope="{row}">
            <el-tag :type="row.is_broadcast === 0 ? 'info' : 'success'">
              {{ row.is_broadcast === 0 ? '否' : '是' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="created_at"/>
      </el-table>

      <cus-pagination
        :limit.sync="perPage"
        :page.sync="page"
        :total="total"
        @pagination="getList"
      />
    </el-card>
  </section>
</template>

<script>

import request from '@/utils/request'

const games = [
  {
    value: '1',
    label: '霓虹扭蛋机'
  },
  {
    value: '2',
    label: '魔法水晶球'
  },
  {
    value: '3',
    label: '海盗探险'
  }
]

export default {
  name: 'random',
  data() {
    return {
      games,
      /** 当前用户选择的游戏ID */
      currentGame: '1',
      /** 表单项 */
      form: {
        gift_id: '',
        nickname: '',
        plate_id: '',
        count: 1
      },
      currentGiftList: [],
      gift1: [],
      gift2: [],
      gift3: [],
      allGiftList: [],

      tableData: [],
      page: 1,
      perPage: 20,
      total: 0,
      islandList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      try {
        /** 数据列 */
        await this.getList()
        /** 请求礼物列表 */
        const {
          data: {
            lottery,
            gashapon,
            lot3
          }
        } = await request.get('/guessing/lottery/gifts')

        this.gift1 = lottery.sort((pre, cur) => pre.price - cur.price)
        this.gift2 = gashapon.sort((pre, cur) => pre.price - cur.price)
        this.gift3 = lot3.sort((pre, cur) => pre.price - cur.price)
        this.currentGiftList = gashapon
        this.allGiftList = [...lottery, ...gashapon, ...lot3]

        const { data } = await request('/guessing/lottery/prizes')
        this.islandList = data
      } catch (e) {
        console.error(e)
      }
    },

    async getList(pagination) {
      let page, limit
      if (pagination) {
        ({ page, limit } = pagination)
      }

      const pagin = {
        page: this.page,
        per_page: this.perPage
      }

      const { data: { data, current_page, total, per_page } } = await request('/guessing/push/logs', {
        params: pagin
      })
      this.tableData = data
      this.page = page || current_page
      this.perPage = limit || per_page
      this.total = total
    },
    async submit() {
      if (this.form.gift_id === '') return void this.$message.warning('请选择礼物')
      if (this.form.count === '') return void this.$message.warning('请输入礼物数量')

      const { gift_id, nickname, count, plate_id } = this.form

      let code
      try {
        if (this.currentGame === '1') /** 扭蛋 */ {
          ({ code } = await request.post('/guessing/push/gashapon', { gift_id, nickname, count }))
        } else if (this.currentGame === '2') /** 水晶球 */ {
          ({ code } = await request.post('/guessing/push/luckyPrize', { gift_id, nickname, count }))
        } else /** 海盗 */ {
          ({ code } = await request.post('/guessing/push/lottery', { gift_id, nickname, count, plate_id }))
        }

        if (code === 200) {
          await this.getList()
          this.$message.success('操作成功')
        }
      } catch (e) {
        console.error(e)
      }
    },
    getGameName(gameTag) {
      if (gameTag === 1) {
        return '海盗探险'
      } else if (gameTag === 2) {
        return '霓虹扭蛋机'
      } else {
        return '魔法水晶球'
      }
    }
  },
  watch: {
    currentGame(value) {
      this.form.gift_id = ''
      if (value === '1') {
        this.currentGiftList = this.gift2
      } else if (value === '2') {
        this.currentGiftList = this.gift3
      } else {
        this.currentGiftList = this.gift1
      }
    }
  }

}
</script>

<style scoped>

</style>
